<template>
  <div class="theme-settings">
    <el-switch
        v-model="isDark"
        :active-icon="Sunny"
        :inactive-icon="Moon"
        @change="changeTheme"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Sunny, Moon } from '@element-plus/icons-vue';
import 'element-plus/theme-chalk/dark/css-vars.css' //暗黑模式

const isDark = ref(false);

const changeTheme = () => {
  // 切换主题
  document.documentElement.setAttribute('data-theme', isDark.value ? 'dark' : 'light');
  localStorage.setItem('theme', isDark.value ? 'dark' : 'light');
};

onMounted(() => {
  // 从localStorage加载上次保存的主题
  const savedTheme = localStorage.getItem('theme') || 'light';
  isDark.value = savedTheme === 'dark';
  document.documentElement.setAttribute('data-theme', isDark.value ? 'dark' : 'light');
});
</script>

<style>

</style>